<template>
  <view class="container">
    <image class="avatar" :src="detail.avatarURL" :lazy-load="true" mode="aspectFill"></image>
    <view class="detail">
      <view>
        <view class="name">{{ detail.username }}</view>
        <view class="content">{{ detail.content }}</view>
      </view>
      <view class="images" v-if="detail.images">
        <image
          class="image"
          :lazy-load="true"
          v-for="(item, index) in JSON.parse(detail.images).slice(0, 4)"
          :key="index"
          mode="aspectFill"
          :src="item"
          @click.stop="previewImage(index)"
        />
      </view>
      <view class="info">
        <view style="display: flex; gap: 20rpx">
          <view class="create-date">{{ detail.createDate }}</view>
          <view class="delete-btn" v-if="detail.userID === useUserStore.userInfo.userID" @click.stop="popupRef.open()">
            删除
          </view>
        </view>
        <view style="display: flex; gap: 20rpx">
          <view class="like">
            <view v-if="!stared" @click.stop="handleLike" style="scale: 0.6; margin-top: 12rpx">
              <uni-icons class="t-icon t-icon-dianzan"></uni-icons>
            </view>
            <view v-else @click.stop="handleDislike" style="scale: 0.6; margin-top: 12rpx">
              <uni-icons class="t-icon t-icon-dianzan1"></uni-icons>
            </view>
            {{ stared ? '取消' : '点赞' }}
          </view>
          <view class="comment" @click.stop="handleComment">
            <uni-icons class="t-icon t-icon-xiaoxi" style="scale: 0.6; margin-bottom: 4rpx"></uni-icons>
            评论
          </view>
        </view>
      </view>
      <view class="category">分类：{{ detail.category }}</view>
    </view>
  </view>
  <view class="comments">
    <Comments ref="commentsRef" :id="circleID" />
  </view>
  <uni-popup ref="popupRef" type="dialog">
    <uni-popup-dialog
      type="warning"
      cancelText="取消"
      confirmText="确认"
      title="警告"
      content="确认要删除该校园圈吗？"
      @confirm="handleDelete"
    ></uni-popup-dialog>
  </uni-popup>
  <Loading />
  <Comment ref="commentRef" :id="circleID" @refresh="getComments" />
</template>

<script setup>
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import { GetCircleDetail, GetCircleStared, DeleteCircle, CircleDislike, CircleLike } from '@/apis/circle'
  import { userStore } from '@/store/user'
  import { nextTick, ref } from 'vue'
  import Loading from '@/components/Loading.vue'
  import Comments from './components/comments.vue'
  import Comment from '@/pages/circle/components/comment.vue'

  const useUserStore = userStore()
  const detail = ref({})
  const circleID = ref(0)
  const reachBottom = ref(false)
  const stared = ref(false)
  const popupRef = ref()
  // 评论列表ref
  const commentsRef = ref()

  function getComments() {
    commentsRef.value.refresh()
  }

  // 图片预览
  function previewImage(e) {
    uni.previewImage({
      current: e,
      urls: detail.value.images ? JSON.parse(detail.value.images) : [],
      loop: false
    })
  }

  // 点赞
  function handleLike() {
    CircleLike({ circleID: circleID.value })
      .then((res) => {
        uni.showToast({
          title: res.message,
          icon: 'success'
        })
      })
      .finally(() => {
        refresh()
      })
  }

  function handleDislike() {
    CircleDislike({ circleID: circleID.value })
      .then((res) => {
        uni.showToast({
          title: res.message,
          icon: 'success'
        })
      })
      .finally(() => {
        refresh()
      })
  }

  // 评论组件ref
  const commentRef = ref()

  function handleComment() {
    commentRef.value.openPopup()
  }

  // 删除
  function handleDelete() {
    DeleteCircle({ circleID: circleID.value }).then((res) => {
      uni.showToast({
        title: res.message,
        icon: 'success'
      })
      uni.navigateBack()
    })
  }

  onReachBottom(() => {
    commentsRef.value.getComments()
  })

  async function refresh() {
    await GetCircleDetail({
      circleID: circleID.value
    }).then((res) => {
      detail.value = res.data
      console.log(res.data)
    })
    await GetCircleStared({ circleID: circleID.value }).then((res) => {
      stared.value = res.stared
    })
  }

  onLoad(async (e) => {
    circleID.value = e.id
    await refresh()
    nextTick(() => {
      uni.setNavigationBarTitle({
        title: detail.value.title
      })
    })
  })
</script>

<style lang="scss">
  .container {
    padding: 20rpx;
    display: flex;
    .avatar {
      min-width: 80rpx;
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }
    .detail {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      .name {
        font-weight: bold;
        font-size: 32rpx;
        color: $my-wzut-icon-primary;
        margin-bottom: 10rpx;
      }
      .content {
        margin-bottom: 20rpx;
      }
      .images {
        overflow: hidden;
        white-space: nowrap;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10rpx;

        .image {
          width: 100%;
          height: 240rpx;
          aspect-ratio: 1/1;

          &:last-child {
            margin-right: 0;
          }
        }
      }
      .category {
        font-size: 16rpx;
        color: #999;
      }
      .info {
        line-height: 80rpx;
        display: flex;
        gap: 20rpx;
        justify-content: space-between;
        align-items: center;
        .create-date {
          font-size: 16rpx;
          color: #999;
        }
        .delete-btn {
          font-size: 24rpx;
          color: $my-wzut-icon-primary;
          &:active {
            filter: contrast(0.8);
          }
        }
        .like,
        .comment {
          font-size: 24rpx;
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>
